<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>iFrame message passing test</title>
    <meta name="description" content="iFrame message passing test" />
    <meta name="viewport" content="width=device-width" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  </head>

  <body>
    <h2>Automagically resizing iFrame</h2>
    <p>
      Resize window or click one of the links in the iFrame to watch it resize.
      Or try with <a name="anchorParentTest" href="two.html">two iFrames</a>.
    </p>
    <div style="margin:20px;">
      <iframe src="frame.content.html" width="100%" scrolling="no"></iframe>
    </div>
    <p id="callback"></p>
    <div style="margin: 8px 0;font-size:13px;">
      For details on how this works, see
      <a href="http://davidjbradshaw.github.io/iframe-resizer/"
        >http://davidjbradshaw.github.io/iframe-resizer/</a
      >.
    </div>

    <!-- MDN PolyFils for IE8 (This is not normally needed if you use the jQuery version) -->
    <!--[if lte IE 8]>

    <![endif]-->

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script type="text/javascript" src="../js/iframeResizer.min.js"></script>
    <script type="text/javascript">
      /*
       * If you do not understand what the code below does, then please just use the
       * following call in your own code.
       *
       *   iFrameResize({log:true});
       *
       * Once you have it working, set the log option to false.
       */

      iFrameResize({
        log: true, // Enable console logging
        inPageLinks: true,
        onResized: function(messageData) {
          // Callback fn when resize is received
          $('p#callback').html(
            '<b>Frame ID:</b> ' +
              messageData.iframe.id +
              ' <b>Height:</b> ' +
              messageData.height +
              ' <b>Width:</b> ' +
              messageData.width +
              ' <b>Event type:</b> ' +
              messageData.type
          )
        },
        onMessage: function(messageData) {
          // Callback fn when message is received
          $('p#callback').html(
            '<b>Frame ID:</b> ' +
              messageData.iframe.id +
              ' <b>Message:</b> ' +
              messageData.message
          )
          alert(messageData.message)
          document
            .getElementsByTagName('iframe')[0]
            .iFrameResizer.sendMessage('Hello back from parent page')
        },
        onClosed: function(id) {
          // Callback fn when iFrame is closed
          $('p#callback').html(
            '<b>IFrame (</b>' + id + '<b>) removed from page.</b>'
          )
        }
      })
    </script>
  </body>
</html>
